<template>
  <div class="dashboard-container">
    <div class="dashboard-text">PostMain</div>
    <div class="dashboard-tag">
      <el-tag type="warning">
        提示：请求类型不管是什么类型，请求参数必须是json格式，发送请求时，会转成对应的请求类型参数。
        下拉框基地址请前往文档管理 -> 全局参数 -> 基地址配置 -> 添加保存即可
      </el-tag>
    </div>
    <div class="dashboard-request">
      <el-select v-model="api.method" placeholder="请选择">
        <el-option label="GET" value="GET" />
        <el-option label="POST" value="POST" />
        <el-option label="PUT" value="PUT" />
        <el-option label="DELETE" value="DELETE" />
      </el-select>
      <el-select v-model="urlData.index" placeholder="请选择" style="width: 500px" @change="urlChange">
        <el-option
          v-for="(item,index) in urlData.baseUrlList"
          :key="index"
          :label="item"
          :value="index"
        />
      </el-select>
      <el-input v-model="api.path" placeholder="请输入内容" />
      <el-button type="primary" @click="sendRequest">发送请求</el-button>
    </div>
    <div class="dashboard-type">
      <span>请求类型：</span>
      <el-radio v-model="api.requestType" label="0">multipart/form-data</el-radio>
      <el-radio v-model="api.requestType" label="1">application/json</el-radio>
      <el-radio v-model="api.requestType" label="2">application/x-www-form-urlencoded</el-radio>
    </div>
    <div class="dashboard-body">
      <span>请求参数：</span>
      <VueJsonEditor v-model="requestParams" :value="requestParams" :height="300" />
    </div>
    <div class="dashboard-body">
      <span>响应参数：</span>
      <VueJsonEditor v-model="data" :value="data" :height="300" />
    </div>
  </div>
</template>

<script>
import VueJsonEditor from '@/components/VueJsonEditor'
import { formDataRequest, getRequest, jsonRequest } from '@/api/apiTestRequest'
import formDataUtil from '@/utils/formDataUtil'
import { getTestBaseUrlList, saveTestBaseUrl, saveTestBaseUrlList } from '@/utils/requestTestHeaderUtil'
import StringUtils from '@/utils/error/StringUtils'
export default {
  name: 'Dashboard',
  components: { VueJsonEditor },
  data() {
    return {
      requestParams: {
      },
      data: {
      },
      urlData: {
        index: '',
        baseUrlList: ['']
      },
      api: {
        method: 'GET',
        path: '',
        requestType: '0'
      }
    }
  },
  mounted() {
    this.getBaseUrlList()
  },
  methods: {
    saveBaseUrl(baseUrl) {
      saveTestBaseUrl(baseUrl)
    },
    urlChange(index) {
      this.saveBaseUrl(this.urlData.baseUrlList[index])
      this.urlData.index = index
      saveTestBaseUrlList(JSON.stringify(this.urlData))
    },
    getBaseUrlList() {
      const item = getTestBaseUrlList()
      if (item !== null) {
        this.urlData = item
      }
    },
    sendRequest() {
      const { method, path, requestType } = this.api
      if (method === 'GET') {
        if (!StringUtils.isEmptyArray(this.requestParams)) {
          let requestParams
          if (Object.prototype.toString.call(this.requestParams) === '[object Object]') {
            requestParams = this.requestParams
          } else {
            requestParams = formDataUtil.getJsonObj(this.requestParams)
          }
          getRequest(method, path, requestParams).then((res) => {
            this.data = res
          })
        } else {
          getRequest(method, path, {}).then((res) => {
            this.data = res
          })
        }
      } else {
        switch (requestType) {
          case '0':
            var p = {}
            if (this.requestParams.length === undefined) {
              p = {}
            } else {
              if (Object.prototype.toString.call(this.requestParams) === '[object Object]') {
                p = this.requestParams
              } else {
                p = formDataUtil.getJsonObj(this.requestParams)
              }
            }
            formDataRequest(method, path, p).then((res) => {
              this.data = res
            })
            break
          case '1':
            var p2 = {}
            if (this.requestParams.length === undefined) {
              p2 = {}
            } else {
              if (Object.prototype.toString.call(this.requestParams) === '[object Object]') {
                p2 = this.requestParams
              } else {
                p2 = formDataUtil.getJsonObj(this.requestParams)
              }
            }
            jsonRequest(method, path, p2).then((res) => {
              this.data = res
            })
            break
          case '2':
            getRequest(method, path, formDataUtil.getJsonObj(this.requestParams)).then((res) => {
              this.data = res
            })
            break
          default:
            return ''
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    display: flex;
    flex-direction: column;
  }
  &-text {
    text-align: center;
    width: 100%;
    font-size: 45px;
    margin: 0 auto;
  }
  &-request {
    display: flex;
    flex-direction: row;
  }
  &-body {
    padding: 20px;
  }
  &-body span{
    padding: 20px;
    font-size: 25px;
  }
  &-tag {
    padding: 10px;
  }
  &-type {
    padding: 20px;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    margin: 0 auto;
  }
}
</style>
